<template>
	<!-- 订单详情 -->
	<view class="order_detail">
		<view style="font-size:16px;padding:15px;background: #fff;">
			<uni-breadcrumb separator="/">
				<uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
					{{route.name}}
				</uni-breadcrumb-item>
			</uni-breadcrumb>
		</view>
		<loading v-if="loading" ></loading>
		<view v-if="!loading" >
			<!-- 上部分 -->
				<view class="detail_cards">
					<view class="titlese">
						<image @click.stop="eventImage(data.shop_id[0].logo.url)" :src="data.shop_id[0].logo.url+'?x-oss-process=image/resize,m_fixed,h_100,w_100'" mode="widthFix"
						style="width:40px; height:30px;border-radius:50%"></image>
						<uni-tooltip  :content="'店铺Tel:'+data.shop_id[0].tel" placement="top" @click="onCopy(data.shop_id[0].tel)" >
							<view class="titleApp" >
								<text>
									{{data.shop_id[0].title}}
								</text>
							</view>
						</uni-tooltip>
					</view>
					<view class="detail_status"  @click="this.$refs.showStatus.open()" >
						<view class="titleApp">
							#{{data.serial_number}}
						</view>
						<view style="display:flex;	align-items: center;">
							<text :style="`color:${ onStatus(data.status.value) }`">{{data.status.text}}</text>
							<uni-icons type="right" class="iconfonts" size="13" :style="`color:#ccc`"></uni-icons>
						</view>
						<view class="TelApp">
							{{orderStatusList[orderStatusList.length-1].desc}}
						</view>
					</view>
				</view>
				
				<uni-table  border stripe emptyText=" "  style="font-size:28px;" >
					<!-- 商品展示 -->
					<uni-tr v-for="(items,index) in data.goods" :key="index"  
						@click="goUrl(`/pages/shop/goods/edit?id=${items._id}&store_id=${data.shop_id[0]._id}&store=${shop_title}`)" 
						style="cursor:pointer;" 
					>
						<uni-td colspan="2" 	>
							<view class="goods_item"  >
								<view class="title">
									<view style="margin-left:-0rpx">
										<image @click.stop="eventImage(items.images)" :src="items.images+'?x-oss-process=image/resize,m_fixed,h_100,w_100'" mode="widthFix"
											style="width:40px;"></image>
									</view>
								</view>
								<view class="labelname">
									<text style="font-weight:bold;">{{items.name?items.name : ""}}</text>
									<text>{{ ' ' + (items.sku? isAttr(items.sku) :'') }} </text>
									<view></view>
									<text v-for="(attr,attrIndex) in items.attr" :key="attrIndex" class="bttom">
										<text>{{attr ? attr :""}}</text>/
									</text>
								</view>
								<view class="labelname">
									{{items.goods_options?isAttr(items.goods_options):''}}
								</view>
								<text class="num">x{{items.number}}</text>
								<text class="fontColorApp">￥<text style="font-size:30rpx;">{{ (items.price/100).toFixed(2) }}</text></text>
							</view>
						</uni-td>
					</uni-tr>
				<!--  👆 商品展示 👆 -->
					<uni-tr>
						<uni-td style="width:200px;" align="center" class="detail-uni-td-weight">
							打包费
						</uni-td>
						<uni-td>
								￥{{(data.pack_price/100).toFixed(2)}}
						</uni-td>
					</uni-tr>
					<uni-tr>
						<uni-td style="width:200px;" align="center" class="detail-uni-td-weight">
							配送费
						</uni-td>
						<uni-td>
								￥{{(data.delivery_price/100).toFixed(2)}}
						</uni-td>
					</uni-tr>
					<uni-tr>
						<uni-td style="width:200px;" align="center" class="detail-uni-td-weight">
							订单总额
						</uni-td>
						<uni-td>
								￥{{( ( 0 )/100).toFixed(2)}}
						</uni-td>
					</uni-tr>
					
					<uni-tr>
						<uni-td style="width:200px;" align="center" class="detail-uni-td-weight">
							优惠金额
						</uni-td>
						<uni-td>
							<view class="">
								￥{{((data.total_price+data.delivery_price+data.pack_price - data.total_fee  )/100).toFixed(2)}}
							</view>
						</uni-td>
					</uni-tr>
					
					<uni-tr>
						<uni-td style="width:200px;" align="center" class="detail-uni-td-weight">
							支付金额
						</uni-td>
						<uni-td class="daole">
							<text class="fontColorApp">
								￥{{(data.total_fee/100).toFixed(2)}}
							</text>
						</uni-td>
					</uni-tr>
					<uni-tr>
						<uni-td style="width:200px;" align="center" class="detail-uni-td-weight">
							商品价格
						</uni-td>
						<uni-td class="daole">
							<text class="fontColorApp">
								￥{{(data.total_price/100).toFixed(2)}}
							</text>
						</uni-td>
					</uni-tr>
					<uni-tr>
						<uni-td style="width:200px;" align="center" class="detail-uni-td-weight">
							商家到款
						</uni-td>
						<uni-td class="daole">
							<text class="fontColorApp">
								￥{{(data.advance_income_price/100).toFixed(2)}}
							</text>
						</uni-td>
					</uni-tr>
					
					<uni-tr><uni-td  colspan="2" style="height:50px;" ></uni-td></uni-tr>
				<!-- 下部分 -->
					<uni-tr>
						<uni-td style="width:200px;" align="center" class="detail-uni-td-weight">
							就餐类型
						</uni-td>
						<uni-td>
							<view  :style="`color:${data.type==2?'#0097e6':data.type==1&&data.service_text=='预约时间送达'?'#4cd137':'#e88b00'}`" >
								{{data.type==2?'到店就餐':data.service_text=='预约时间送达'?'按预约时间送达':'外卖配送'}}
							</view>
						</uni-td>
					</uni-tr >
					<uni-tr>
						<uni-td align="center" class="detail-uni-td-weight">
							支付方式
						</uni-td>
						<uni-td>
							{{data.provider.text}}
						</uni-td>
					</uni-tr >
					<uni-tr>
						<uni-td align="center" class="detail-uni-td-weight">
							预计送达时间
						</uni-td>
						<uni-td>
							<uni-dateformat :date="data.service_time.time_stamp"></uni-dateformat>
						</uni-td>
					</uni-tr >
						
					<uni-tr>
						<uni-td align="center" class="detail-uni-td-weight">
							实际送达时间
						</uni-td>
						<uni-td>
							<uni-dateformat :date="data.status.create_time"></uni-dateformat>
						</uni-td>
					</uni-tr >
					
					<uni-tr v-if="data.rider">
						<uni-td align="center" class="detail-uni-td-weight">
							配送骑手
						</uni-td>
						<uni-td>
							{{data.rider.nickname}}
						</uni-td>
					</uni-tr >
					<uni-tr v-if="data.address" >
						<uni-td align="center" class="detail-uni-td-weight">
							配送地址
						</uni-td>
						<uni-td>
							<view>
								{{data.address.address}} — {{data.address.title}}
							</view>
						</uni-td>
					</uni-tr >
					<uni-tr  v-if="data.address" >
						<uni-td align="center" class="detail-uni-td-weight">
							详细地址
						</uni-td>
						<uni-td>
							<view>
								{{data.address.address_detail}}
							</view>
						</uni-td>
					</uni-tr >
					<uni-tr v-if="data.address" >
						<uni-td align="center" class="detail-uni-td-weight">
							用户名称
						</uni-td>
						<uni-td>
							<view style="display: flex;">
								<text>{{data.address.name}}</text>
							</view>
						</uni-td>
					</uni-tr >
					<uni-tr v-if="data.address" >
						<uni-td align="center" class="detail-uni-td-weight">
							用户号码
						</uni-td>
						<uni-td>
							{{formatPhone(data.address.phone)}}
						</uni-td>
					</uni-tr >
					
					<uni-tr>
						<uni-td align="center" class="detail-uni-td-weight">
							餐具数量
						</uni-td>
						<uni-td>
							{{data.tableware}}
						</uni-td>
					</uni-tr >
					<uni-tr>
						<uni-td align="center" class="detail-uni-td-weight">
							备注
						</uni-td>
						<uni-td>
							<view class="fontColorApp">
								{{data.notes}}
							</view>
						</uni-td>
					</uni-tr >
					<uni-tr>
						<uni-td align="center" class="detail-uni-td-weight">
							团派优惠价格
						</uni-td>
						<uni-td>
							￥{{(data.group_buying_price/100).toFixed(2)}}
						</uni-td>
					</uni-tr >
					<uni-tr>
						<uni-td align="center" class="detail-uni-td-weight">
							支付描述
						</uni-td>
						<uni-td>
							{{data.description}}
						</uni-td>
					</uni-tr >
					<uni-tr v-if="data.err_msg" >
						<uni-td align="center" class="detail-uni-td-weight">
							支付失败原因
						</uni-td>
						<uni-td>
							{{data.err_msg}}
						</uni-td>
					</uni-tr >
					<uni-tr v-if="data.err_msg">
						<uni-td align="center" class="detail-uni-td-weight"  >
							当前退款笔数
						</uni-td>
						<uni-td>
							{{data.refund_count}}
						</uni-td>
					</uni-tr >
					<uni-tr  v-if="data.refund_list" >
						<uni-td align="center" class="detail-uni-td-weight">
							退款详情
						</uni-td>
						<uni-td>
							{{data.refund_list}}
						</uni-td>
					</uni-tr >
					<uni-tr v-if="data.order_no">
						<uni-td align="center" class="detail-uni-td-weight"  >
							订单号
						</uni-td>
						<uni-td>
							{{data.order_no}}
						</uni-td>
					</uni-tr >
					<uni-tr v-if="data.orders_source">
						<uni-td align="center" class="detail-uni-td-weight"  >
							下单平台
						</uni-td>
						<uni-td>
							{{data.orders_source}}
						</uni-td>
					</uni-tr >
					<uni-tr>
						<uni-td align="center" class="detail-uni-td-weight">
							付款时间
						</uni-td>
						<uni-td>
							<uni-dateformat :date="data.pay_date" format="yyyy年MM月dd日 hh:mm:ss" ></uni-dateformat>
						</uni-td>
					</uni-tr >
					<uni-tr>
						<uni-td align="center" class="detail-uni-td-weight">
							创建时间
						</uni-td>
						<uni-td>
							<uni-dateformat :date="data.create_date.time_stamp" format="yyyy年MM月dd日 hh:mm:ss" ></uni-dateformat>
						</uni-td>
					</uni-tr >
					
				</uni-table>
			</view>
			<!-- 地图 -->
			<view class="map" v-if="data.status.value < 6 && data.type == 1">
				<text class="titleApp">
					地图：
					{{map.riderText}}
				</text>
				<map style="width:80%; height:500px;margin:20px ;border-radius: 50rpx;" :latitude="map.shop.latitude" :longitude="map.shop.longitude" :markers="map.covers"
					:min-scale="10" :enable-satellite="true" :scale="14" :polyline="map.polyline"
				></map>
			</view>
			
			<!-- 订单状态-步骤条 -->
			<view>
				<uni-popup ref="showStatus" type="bottom" backgroundColor="#fff" >
					<view class="popup">
						<uni-section title="订单状态" type="line" padding >
							<uni-steps :options="orderStatusList" :active="orderStatusList.length-1" active-color="#007AFF" direction="column" />
						</uni-section>
					</view>
				</uni-popup>
			</view>
		</view>
</template>
<script>
	import Util from "@/js_sdk/validator/util.js"
	const global = uniCloud.importObject("global", { customUI: true  })
	export default {
		data() {
			return {
				loading:true,
				// 面包屑
				routes: [
					{to: "/pages/index/index",name: "首页",},
					{to: "/pages/order/uni-pay-orders/list",name: "订单列表",},
					{to: "",name: "订单详情",},
				],
				orderNo: "", //订单号
				// 订单状态时间轴
				showStatus: false,
				timeOut: '',
				data: { // 订单数据
					shop_id:[{tel:''}],
					status: {
						text: "·····",
						value: 0,
						create_time: null
					},
					service_time: {
						time: "2023-8-22 10:59",
						time_stamp: 1692673140000
					},
					create_date: {},
					provider: {},
					address: {}
				},
				orderStatusList: [],
				map:{
					orderNO: '', //订单号
					shop: { // 商户
						latitude: 39.909,
						longitude: 116.39742,
					},
					status: {}, // 配送状态
					userData: {
						create_date: {},
						address: {}
					},
					covers: [], // 坐标
					polyline: [ // 配送路线
						{
							points: [
							],
							borderColor:'#c9ffc9',
							borderWidth:2,
							dottedLine: true
						}
					],
					riderText: '', // 配送说明
				}
			}
		},
		onLoad(e) {
			this.orderNo = e.id
			this.getOrderStatus()
		},
		methods: {
			// 获取订单详情数据
			getDetailData(orderNo) {
				var tempFlied =	"address,advance_income_price,orders_source,rider,group_buying_price,create_date,deduct_delivery_price,delivery_price,delivery_time,description,distance,goods,notes,order_no,out_trade_no,pack_price,pay_date,pay_type,platform_commission,preferential,provider,serial_number,service_time,shop_id,shop_user_id,status,tableware,tableware_number,total_fee,total_number,total_price,type,uni_platform,user_id"
				// 获取订单数据
				global.getDataOne(
					"orders", {order_no: this.orderNo}, tempFlied, 
					"shop", "_id,title,location,logo,tel"
				).then(res => {
					// console.log(res.data);
					this.data = res.data;
				// 商铺信息  ↓ ↓ ↓ ↓
					this.map.shop.latitude = res.data.shop_id[0].location.coordinates[1]
					this.map.shop.longitude = res.data.shop_id[0].location.coordinates[0]
					var shop = { // 商家
						id: 1,
						title: res.data.shop_id[0].title,
						clickable: true,
						latitude: res.data.shop_id[0].location.coordinates[1],
						longitude: res.data.shop_id[0].location.coordinates[0],
						iconPath: '/static/image/shangjia.png'
					}
					this.map.covers.push(shop)
				// 商铺信息  ↑ ↑ ↑ ↑ ↑ ↑
				// 绘制 商家路线 ↓ ↓ ↓ ↓
					if( res.data.status.value < 3 ||res.data.status.value >= 5 ){
						var shopStart = {
							latitude:  res.data.shop_id[0].location.coordinates[1],
							longitude: res.data.shop_id[0].location.coordinates[0]
						}
						this.map.polyline[0].points.push(shopStart)
					}
				// 绘制 商家路线 ↑ ↑ ↑ ↑ ↑
				// 用户信息 -坐标 ↓ ↓ ↓ ↓ ↓ ↓
				if(res.data.address){
					var user = { // 商家
						id: 1,
						title: res.data.address.name,
						clickable: true,
						latitude: res.data.address.location.coordinates[1],
						longitude: res.data.address.location.coordinates[0],
						iconPath: '/static/image/yonghu.png'
					}
					this.map.covers.push(user)
				}
					
				// 用户信息 -坐标↑ ↑ ↑ ↑ ↑ ↑ ↑
				
				// 绘制 用户路线 
					if( res.data.status.value > 2 && res.data.status.value < 5 &&res.data.address){
						var start = {
							latitude: res.data.address.location.coordinates[1],
							longitude: res.data.address.location.coordinates[0]
						}
						this.map.polyline[0].points.push(start)
					}
					
				// 绘制骑手-用户路线
					if( res.data.rider != null && res.data.status.value >= 2 && res.data.status.value < 5){
						this.getRiderAddress(res.data.rider.user_id)
					}
					// 验证是否超时
					var statusCreateTime = Date.now() - res.data.status.create_time
					var timeTemp = 1000 * 60 * 5
					if (statusCreateTime > timeTemp) {
						this.timeOut = '超时'
					} else {
						this.timeOut = '未超时';
					}
					this.loading = false
				})
			},
			// 获取骑手位置
			getRiderAddress(rider_id){
				global.getDataOne("rider_users", {_id: rider_id}, "location,name").then(res => {
					var rider = { // 骑手
						id: 2,
						title: res.data.name,
						clickable: true,
						latitude: res.data.location.coordinates[1],
						longitude: res.data.location.coordinates[0],
						iconPath: '/static/image/qishou.png'
					}
					this.map.covers.push(rider)
					// 绘制骑手路线
					var start = {
						latitude: res.data.location.coordinates[1],
						longitude: res.data.location.coordinates[0]
					}
					this.map.polyline[0].points.push(start)
					
				})
			},
			
			/* 获取订单状态 */
			getOrderStatus() {
				global.getDataOne("order_status", {
					order_no: this.orderNo
				}, "order_status,order_no").then(res => {
					var newData = res.data.order_status.map((element) => {
						return {
							title: element.text,
							desc: this.formatTimestamp(element.create_time)
						};
					});
					this.getDetailData()
					this.orderStatusList = newData;
					// console.log(this.orderStatusList)
				}).catch(error => {})
			},
			// 复制
			onCopy(val){
				uni.setClipboardData({
					data:val
				}) 
			},
			goUrl(Url){
				uni.navigateTo({
					url:Url
				})
			},
			// 手机号重构
			formatPhone(mobile){
				return Util.formatPhoneNumber(mobile)
			},
			// 属性返回
			isAttr(Attr){
				return Util.isAttr(Attr)
			},
			/**
			 * 检索当前用户权限是否合格
			 * @param admin{array} 当前操作需拥有权限
			 * @return {boolean} 返回布尔值，有权限则为真其他为假
*/
			userHasPermission(admin=['']){
				return  Util.userHasPermission(admin)
			},
			eventImage(image){
				uni.previewImage({urls:[image]})
			},
			// 订单状态-颜色
			onStatus(Num) {
				return Util.onStatus(Num)
			},
			// 将时间戳转化为 yyyy/mm/dd hh：mm：ii
			formatTimestamp(timestamp) {
				const date = new Date(timestamp);
				// 获取年、月、日、时、分、秒
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');
				// 拼接成年-月-日 时:分:秒格式字符串
				const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				return formattedTime;
			},
		}
	}
</script>
<style lang="scss" scoped>
	.map{
		padding:20rpx 90rpx; 
		background: #fff;
		margin:30rpx 0;
	}
	.daole{
		color: #ff2d51;
	}
	/* 商家拒绝订单 */
	.propups {
		padding: 30rpx;
		.item_text_open {
			padding: 10rpx;
			border-bottom: 1rpx solid #eee;
		}
		.button {
			display: flex;
			margin: 50rpx 0 0 0;
		}
		.title {
			font-weight: bold;
			line-height: 50rpx;

			.label {
				text-align: left;
				font-size: 25rpx;
				color: #999;
				font-weight: 400;
				line-height: 35rpx;
			}
		}

	}

	.popup {
		padding: 40rpx;
		height: 60vh;

		.u-node {
			border-radius: 50%;
		}
	}

	.subtotal {
		padding: 30rpx 0 0 0;
		line-height: 60rpx;
		text-align: right;
		display: flex;
		justify-content: space-between;
	}
	.goods_item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: left;
		padding: 0rpx 100rpx;
		padding: 0rpx 100rpx;
		.title {
			flex: .7;
		}
	
		.labelname {
			padding: 0 10rpx;
			flex: 2;
		}
	
		.num {
			flex: .4;
		}
		.money {
			flex: .1;
			margin: 0 10rpx;
			color: #ff6600;
		}
	}

	.label:hover{
		background:#eee;
	}
	.label {
		display: flex;
		justify-content: space-between;
		text-align: right;
		transition: .5s;
		line-height: 50rpx;
		border-radius:3px;
		padding:20rpx 10rpx 20rpx 30rpx;
		border-bottom:1rpx solid #eee ;
		text {
			text-align: left;
			flex: 0.4;
		}
		view {
			flex: 1;
		}
	}

	.detail_cards {
		display: flex;
		background: #fff;
		border-radius:10rpx;
		align-items: center;
		justify-content:space-between;
		padding:20rpx 100rpx; margin: 20rpx 0;
		.titlese {
			display:flex;		align-items: center;
			image{
				margin:0  15px 0 0
			}
		}
		.detail_status {
			font-size:14px;
			color: #5e5e5e;
			border-left:1px dotted #d3d3d3;
			padding:0 0 0 20px; 
			cursor:pointer;
			.iconfonts {
				font-weight: 400;
				margin: 0 10rpx;
			}
		}
	}


	.order_detail {
		padding:2%;
		color: #565656;
	}
</style>
<style>
	page {
		background: #f8f8f8;
	}
</style>